<template style="background-color: #0682C5">
  <div>
    <div class="header">
      <el-row>
        <span class="welcome">欢迎来到新杰养老院</span>
        <router-link to="/Login"><span class="login"><i class="el-icon-user"></i>登录</span></router-link>
      </el-row>
    </div>


    <el-row style="margin-top: 15px">
      <el-image :src="imgArr[index]" style="height: 600px;width: 1920px"></el-image>
      <a href="javascript:void (0)" v-show="index!==0" @click="prev" class="left_icon">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:void (0)" v-show="index <imgArr.length-1" @click="next" class="right_icon">
        <i class="el-icon-arrow-right"></i>
      </a>
    </el-row>
    <el-row style="margin-top: 15px">
      <el-image :src="imgt2"></el-image>
      <span
        style="color: #060201;font-size: x-large;background-color: #7bcbff;text-align:left;font-family: 楷体">我院标语</span><br>
    </el-row>
    <div style="padding-left: 80px">
      <el-row style="text-align: left; margin-top: 10px">
      <span
        style="color: #ff5e3c;font-size: xx-large;background-color: #ffefa9;text-align: center;font-family: 楷体">    盈缩之期，不但在天；养怡之福，可得永年。</span><br>
      </el-row>
      <el-row style="margin-top: 5px">
      <span
        style="color: #ff5e3c;font-size: xx-large;background-color: #ffefa9;text-align: center;font-family: 楷体">     弘扬尊老敬老美德，构建和谐社会氛围。</span><br>
      </el-row>
    </div>
    <el-row style="margin-top: 15px">
      <el-image :src="imgt1"></el-image>
      <span
        style="color: #060201;font-size: x-large;background-color: #7bcbff;text-align:left;font-family: 楷体">我院风采</span><br>
    </el-row>
    <el-row style="text-align: center; margin-top: 10px" :gutter="20">

      <el-col :span="8">
        <el-card :body-style="{ padding: '0px' }">
          <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1108659579,427167892&fm=11&gp=0.jpg"
               class="image">
          <div style="padding: 14px;">
            <span>我院组织普法宣传</span>
            <div class="bottom clearfix">
            </div>
          </div>
          -
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card :body-style="{ padding: '0px' }">
          <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1004331090,192065561&fm=26&gp=0.jpg"
               class="image">
          <div style="padding: 14px;">
            <span>健康义诊</span>
            <div class="bottom clearfix">
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card :body-style="{ padding: '0px' }">
          <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=559815092,2230553481&fm=26&gp=0.jpg"
               class="image">
          <div style="padding: 14px;">
            <span>携手学生慰问老人</span><br>
            <span>给老人送去朝气的关怀</span>
            <div class="bottom clearfix">
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    export default {
        name: "Fan",
        data() {
            return {
                index: 0,
                imgArr: [
                    require('../assets/2.jpg'),
                    require('../assets/1.jpg'),
                    require('../assets/3.jpg'),
                    require('../assets/4.png'),
                ],
                imgt1: require('../assets/t1.png'),
                imgt2: require('../assets/t2.png'),


            }
        },
        methods: {
            prev() {
                this.index--
            },
            next() {
                this.index++
            }
        }
    }
</script>

<style scoped>
  a {
    text-decoration: none;
  }

  .router-link-active {
    text-decoration: none;
  }

  .left_icon {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 140px auto;
    width: 10px;
    padding: 15px 20px 20px;
    background: #fff;
    border: 1px solid #eaeaea;
    position: absolute;
    left: 30px;
    top: 20px;
  }

  .right_icon {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 140px auto;
    width: 10px;
    padding: 15px 20px 20px;
    background: #fff;
    border: 1px solid #eaeaea;
    position: absolute;
    left: 1810px;
    top: 20px;
  }

  .header {
    background: #F6F6F6;
    padding: 6px 0;
    height: 15px;
  }

  .welcome {
    font-size: 14px;
    color: #9E9E9E;
    position: absolute;
    left: 250px;
    top: 0px;
  }

  .login {
    font-size: 14px;
    color: #9e0047;
    position: absolute;
    left: 1200px;
    top: 0px;
  }
</style>
